<template>
  <div>
    <el-drawer :visible.sync="showDialog" :modal="false">
      <div style="display: flex;width: 100%">
        <div class="left">
          <span>{{ storeDetail.assignName }}</span>
          <div class="leftCon">
            <p class="p1">状态/类型</p>
            <p class="p2">
              <span>{{ storeDetail.storeType === 1 ? '普通店' : '旗舰店' }}</span>
            </p>
          </div>

          <div class="leftCon">
            <p class="p1">营业时间</p>
            <p class="p2">
              09:00-22:30
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">编号</p>
            <p class="p2">
              {{ storeDetail.assignNo }}
            </p>
          </div>

          <div class="leftCon">
            <p class="p1">联系电话</p>
            <p class="p2">
              {{ storeDetail.storeStaffPhone || '-' }}
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">所在省市</p>
            <p class="p2">
              -
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">详细地址</p>
            <p class="p2">
              {{ storeDetail.address }}
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">面积(m²)</p>
            <p class="p2">
              {{ storeDetail.houseArea || '-' }}
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">所属组织</p>
            <p class="p2">
              {{ storeDetail.storeStaffName || '-' }}
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">证照</p>
            <p class="p2">
              <el-link style="color: #303e9d">查看</el-link>
            </p>
          </div>
          <div class="leftCon">
            <p class="p1">标签</p>
            <p class="p2">
              --
            </p>
          </div>

        </div>
        <div class="right">
          <span>巡查数据</span>
          <div style="margin-top: 10px">
            <el-select v-model="flag" size="small" @change="changeFlag">
              <el-option label="本周" value="1"></el-option>
              <el-option label="上周" value="2"></el-option>
              <el-option label="本月" value="3"></el-option>
              <el-option label="上月" value="4"></el-option>
              <el-option label="自定义" value="5"></el-option>
            </el-select>
            <el-date-picker
                size="small"
                v-if="flag==5"
                style="margin-top: 10px;width:220px"
                v-model="dateFn"
                type="daterange"
                clearable
                @change="getDate"
                format-value="yyyy-MMMM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <div class="pic">
              <p class="unQ"><span style="display: block">不合格问题top5</span><span>次数</span></p>
              <img v-if="unQulifify.length==0" src="@/assets/img/noData.svg" style="width: 60px;">
              <p v-for="item in unQulifify" class="unQ"><span>{{ item.problemName }}</span>
                <span>{{ item.unqualifiedCount }}</span>
              </p>
              <el-link v-if="total>5" style="font-size: 13px;color: #303e9d;text-decoration: none"
                       @click="intoUnqulify">查看更多>>
              </el-link>
            </div>
          </div>
          <span style="margin-top: 20px;display: block">巡查纪录</span>
          <div class="pic" v-for="item in patorlList" @click="intoDetail(item)">
            <img v-if="patorlList.length==0" src="@/assets/img/noData.svg" style="width: 60px">
            <div v-else>
              <p style="font-size: 12px;color: #919398" v-if="item.patrolType==2||item.patrolType==1">考评得分率</p>
              <p style="font-size: 12px;color: #919398" v-if="item.patrolType==3||item.patrolType==4">点检得分率</p>
              <p style="font-size: 16px;font-weight: bold">{{ item.scoreRate }}%</p>
              <p style="font-size: 12px;color: #919398">巡查时间：{{ item.completeTime }}</p>
              <p style="font-size: 12px;color: #919398">巡查人：{{ item.userName }}</p>
              <p style="font-size: 12px;color: #919398">巡查模板：{{ item.templateName }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog :visible.sync="unQulififyShow" title="不合格问题汇总" center append-to-body>
      <el-table :data="unQulifify">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="problemName" label="问题名称"></el-table-column>
        <el-table-column prop="unqualifiedCount" label="次数"></el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeMessage"
                     @current-change="handleCurrentMessage" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
                     layout="total, sizes, prev, pager, next, jumper" :total="messageTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "dailyDraw",
  data() {
    return {
      showDialog: false,
      unQulififyShow: false,
      flag: '1',
      messageTotal: 0,
      patorlList: [],
      pageSize: 10,
      startTime: "",
      endTime: "",
      pageNumber: 1,
      currentPage: 1,
      unQulifify: [],
      total: "",
      dateFn: "",
      assignTaskId: "",
      storeDetail: {}
    }
  },
  methods: {
    getDate(val) {
      if (val) {
        this.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.handleOpen(this.assignTaskId)
    },
    handleOpen(val) {
      this.assignTaskId = val
      this.showDialog = true
      this.$api.patrolStorePatrolDataVo({assignTaskId: val}).then(res => {
        this.storeDetail = res
      })
      const data = {
        pageNumber: 1,
        pageSize: 5,
        assignTaskId: val,
        flag: this.flag,
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.$api.patrolGetPatrolRecordVo(data).then(res => {
        this.unQulifify = res.data
        this.total = res.total
      })
      const data2 = {
        pageNumber: 1,
        pageSize: 10,
        assignTaskId: val,
        flag: this.flag,
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.$api.patrolGetStorePatrolRecordVo(data2).then(res => {
        this.patorlList = res.data
      })
    },
    async intoUnqulify() {
      const data = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        assignTaskId: this.assignTaskId,
        flag: 1,
        startTime:this.startTime,
        endTime:this.endTime
      }
      const res = await this.$api.patrolGetPatrolRecordVo(data).then()
      this.unQulifify = res.data
      this.messageTotal = res.total
      this.unQulififyShow = true
    },
    handleSizeMessage(val) {
      this.pageSize = val
      this.intoUnqulify()
    },
    handleCurrentMessage(val) {
      this.pageNumber = val
      this.intoUnqulify()
    },
    changeFlag(val) {
      this.flag = val
      if (val==5){
        this.startTime=""
        this.endTime=''
      }
      this.handleOpen(this.assignTaskId)
    },
    intoDetail(item) {
      sessionStorage.setItem('storeD', JSON.stringify(this.storeDetail))
      sessionStorage.setItem('patorlD', JSON.stringify(item))
      this.$router.push({
        path:"/assessmentDetail",
        query:{
          state:"add"
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.leftCon {
  display: flex;
  margin-top: 10px;
  align-items: center;

  .p1 {
    font-size: 13px;
    width: 60px;
    color: #595959;
    display: flex;
    justify-content: flex-end;
  }

  .p2 {
    margin-left: 20px;

    span {
      display: block;
      width: 40px;
      font-size: 12px;
      height: 20px;
      background-color: #b3e19d;
      color: #303e9d;
      border: 1px solid #13ce66;
      text-align: center
    }
  }
}

.unQ {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  span {
    display: block;
  }
}

.right {

}

.pic {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  background-color: #eee;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;

  img {
    position: absolute;
    top: 30%;
    left: 40%;
  }

  span {
    color: #595959;
    font-size: 12px;
  }
}

/deep/ .el-drawer__header {
  margin-bottom: 10px;
}

.left {
  width: 40%;
  border-right: 1px solid #eee;
  margin: 0 20px;
}

.right {
  margin: 0 20px;
}
</style>